import {
  trigger,
  transition,
  style,
  query,
  animateChild,
  animate,
  group,
  animation
} from '@angular/animations';
export const opacityAnimations = animation([
  style({ position: '{{ position }}' }),
  query(
    ':enter, :leave',
    [
      style({
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%'
      })
    ],
    { optional: true }
  ),
  query(':enter', [style({ opacity: 0 })], { optional: true }),
  query(':leave', [style({ opacity: 1 })], { optional: true }),
  group([
    query(':leave', [animate('500ms ease-out', style({ opacity: 0 }))], {
      optional: true
    }),
    query(':enter', [animate('500ms ease-out', style({ opacity: 1 }))], {
      optional: true
    })
  ]),
  query(':enter', animateChild(), { optional: true })
]);
